<template>
  <div id="news">
    <div class="banner"></div>
    <div class="news-nav">
      当前位置：首页 &gt; <router-link to="/news">新闻中心</router-link> &gt; 新闻详情
    </div>
    <div class="news-main">
      <div class="loading" v-if="loading">
        <div class="loader-inner square-spin">
          <div></div>
        </div>
      </div>
      <h1>{{article.name}}</h1>
      <p class="summary"><span class="time">{{article.update_time}}</span><span class="author">{{article.author}}</span></p>
      <div class="content" v-html="article.content">></div>
    </div>
  </div>
</template>
<script>
  import articlesComponent from '@/components/news/items'
  import {sckr, realImg} from  '@/lib/sckr'
  import jsonp from 'jsonp'
  export default{
    data () {
      return {
        id: null,
        loading: false,
        article: {}
      }
    },
    created () {
      if (typeof $.fn.fullpage.destroy === 'function') {
        $.fn.fullpage.destroy('all')
      }
      this.fetchData()
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        let news = this
        this.loading = true
        jsonp(sckr.api + 'article/' + news.$route.params.id, null, function (err, result) {
          news.loading = false
          if (err) {
            console.error(result.message);
          } else {
            result.content = realImg(result.content)
            news.article = result
          }
        })
      }
    },
    components: {
      articlesComponent
    }
  }
</script>
<style scoped>
  #news .banner{background: url("../../assets/news/banner.jpg") no-repeat center top; background-attachment: fixed; height: 375px}
  #news .news-main{max-width: 1200px; margin: 0 auto; position: relative}
  #news .news-nav{max-width: 1200px; line-height: 40px; margin: 0 auto; font-size: 14px; color: #666; margin-top: 10px; padding-left: 20px}
  #news .summary{line-height: 30px}
  #news .author{margin-left: 10px;}
  #news .news-main p{ padding: 0 20px; font-size: 14px; color: #999}
  #news .news-main h1{padding: 0 20px;}
  #news .content{padding: 20px; overflow: hidden; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; line-height: 22px;}
</style>
